@extends('layouts.mobile_main')

@section('title', '如何使用翻贝网买单?')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
		ul{margin-top: 1.32rem;padding: 0.2rem;}
		ul li{margin: 0.3rem 0;}
		ul li h3{font-size: 0.4rem;}
		ul li p{font-size: 0.4rem;text-indent: 0.8rem;margin: 0.2rem 0;}
		ul li p img{width: 4.5rem;text-align: center;z-index: 1;}
		.max_pic{background: rgba(0,0,0,0.5);width: 100%;position: fixed;z-index: 100;text-align: center;top: 0;display: none;}
		.max_pic img{width: 80%;}
    </style>
@endsection

@section('content')
<header class="pay_sure oh" style="background-color: #fff;position: fixed;top: 0;left: 0;z-index: 10;">
	<a class="fl" href="javascript:history.go(-1);">
	    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/back_p.png?v={{env('IMAGE_VERSION')}}" alt="">
	</a>
	<span class="fl co_violet fz_48" style="margin-left: 2.2rem;">如何使用翻贝网买单?</span>
</header>
<p class="max_pic">
	<img src="{{env('IMAGE_DOMAIN')}}images/buy11.jpg?v={{env('IMAGE_VERSION')}}" alt="">
</p>
<ul>
	<li>
		<h3>方法1：</h3>
		<p>手机登录翻贝网，点击【钱包】-【买单】后，向商家展示二维码或扫描商家二维码即可完成买单</p>
		<p>
			<img src="{{env('IMAGE_DOMAIN')}}images/buy11.jpg?v={{env('IMAGE_VERSION')}}" alt="">
			<img src="{{env('IMAGE_DOMAIN')}}images/buy12.jpg?v={{env('IMAGE_VERSION')}}" alt="">
		</p>
	</li>
	<li>
		<p>
			<img src="{{env('IMAGE_DOMAIN')}}images/buy13.jpg?v={{env('IMAGE_VERSION')}}" alt="">
		</p>
	</li>
	<li>
		<h3>方法2：</h3>
		<p>1、手机登录翻贝网，点击【今日】选择要买单的商家；</p>
		<p>2、点击【消费买单】，手动输入消费金额并确认买单即可完成买单。</p>
		<p>
			<img src="{{env('IMAGE_DOMAIN')}}images/buy21.jpg?v={{env('IMAGE_VERSION')}}" alt="">
			<img src="{{env('IMAGE_DOMAIN')}}images/buy22.jpg?v={{env('IMAGE_VERSION')}}" alt="">
		</p>
	</li>
	<li>
		<p>
			<img src="{{env('IMAGE_DOMAIN')}}images/buy23.jpg?v={{env('IMAGE_VERSION')}}" alt="">
		</p>
	</li>
	<li>
		<h3>方法3：</h3>
		<p>登录翻贝网，点击【今日】页面，选择右上角【扫一扫】扫描商家二维码，输入金额完成买单。</p>
	</li>
</ul>
@endsection

@section('scriptResources')
    @parent
    <script>
	    window.onresize=function(){
		    pagesp();
	    }
	    if(navigator.userAgent=='FBWAndroidApp'||navigator.userAgent.indexOf('FBWiOSApp')>0){
            $('header').hide();
            $("ul").css({"margin-top":"0"})
        }else{
            $('header').show();
        }
	    $(function(){
			var wh = $(window).height();
			var dh = $(document).height();
			$(".max_pic").height(wh);
	    	var on_off = true;
	    	var bodytop;
	    	$("ul img").click(function(){
	    		if(on_off == true){
	    			bodytop = $("body").scrollTop();
	    			$(".max_pic").show();
					var imgtop=($(window).height()-$(".max_pic img").height())/2;
					$(".max_pic img").css("margin-top",imgtop);
	    			var imgsrc = $(this).attr("src");
	    			$(".max_pic img").attr("src",imgsrc);
	    			$(document.body).css({"overflow":"hidden","height":wh});
	    			$("html").css({"overflow":"hidden","height":wh});
	    			on_off = false;
	    		}
	    		$(".max_pic").click(function(){
	    			$("body").scrollTop(bodytop);
	    			$(".max_pic").hide();
	    			$(document.body).css({"overflow":"visible","height":dh});
	    			$("html").css({"overflow":"visible","height":dh});
	    			on_off = true;
	    		});
	    	})
	    })
    </script>
@endsection